<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入订单编号" suffix-icon="el-icon-search" v-model="orderSn"></el-input>
      <el-select v-model="status" placeholder="全部" clearable class="ml-5">
              <el-option 
                v-for="item in statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
              </el-option>
            </el-select>
      <el-button class="ml-5" type="primary" @click="onLoad">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
      <el-table-column prop="orderSn" label="订单编号" width="120" align="center"></el-table-column>
      <el-table-column prop="createTime" label="提交时间" align="center">
        <template slot-scope="scope">{{ scope.row.createTime.replace('T', ' ') }}</template>
      </el-table-column>
      <el-table-column prop="memberUsername" label="用户账号" align="center"></el-table-column>
      <el-table-column label="订单金额" align="center">
        <template slot-scope="scope" v-if="scope.row.totalAmount != null">&yen;{{ scope.row.totalAmount }}</template>
      </el-table-column>
      <el-table-column label="订单状态" width="100" align="center">
        <template slot-scope="scope"> 
          <el-tag type="danger" v-if="scope.row.status === 5">无效订单</el-tag>
          <el-tag type="success" v-if="scope.row.status === 4">已关闭</el-tag>
          <el-tag type="warning" v-if="scope.row.status === 3">已完成</el-tag>
          <el-tag type="warning" v-if="scope.row.status === 2">已发货</el-tag>
          <el-tag v-if="scope.row.status === 1">待发货</el-tag>
          <el-tag color="#F5F5F5" v-if="scope.row.status === 0" style="color: #696969;">待付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作"  width="400" align="center">
        <template slot-scope="scope">
          <el-button 
            type="success"
            @click="goToDetail(scope.row)"
            >查看订单</el-button>
          <el-button
            @click="updateOrder(scope.row, 1)"
            type="primary"
            v-show="scope.row.status===0">订单发货</el-button>
          <el-button 
            type="danger"
            @click="delOrder(scope.row)"
            v-show="scope.row.status >= 4">删除订单</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getOrderPage } from "@/api/order";

export default {
  name: "Order",
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      dialogFormVisibleBilling: false,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      orderSn: "",
      status: "",
      order: {},
      statusOptions: [
          {
            label: '待发货',
            value: 0
          },
          {
            label: '已发货',
            value: 1
          },
          {
            label: '待结账',
            value: 2
          },
          {
            label: '退货中',
            value: 3
          },
          {
            label: '已完成',
            value: 4
          },
          {
            label: '已关闭',
            value: 5
          },
        ]
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    onLoad() {
      getOrderPage({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    reset() {
      this.onLoad()
    },
    goToDetail(row) {
      this.$router.push({
        path: '/oms/orderDetail',
        query: {
          orderSn: row.orderSn
        }
      }
      )
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.onLoad()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.onLoad()
    },
    handleViewOrder(row){
      this.dialogFormVisible = true
      this.username = row.username
      this.getorderItemTable(row.orderSn)
    },
    getorderItemTable(row){
      this.request.get("order/orderDetail", {params: {orderSn: row}}).then(res =>{
        this.order = res.data
        this.order.username = this.username
      })
    },
    shutOrder(row){
      this.request.get("order/shut/" + row.id).then(res =>{
        if (res.code === '200') {
          this.$message.success("关闭成功")
          this.onLoad()
        } else {
          this.$message.error("关闭失败")
        }
        })
    },
    delOrder(row){
      this.request.delete("order/" + row.id).then(res =>{
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.onLoad()
        } else {
          this.$message.error("删除失败")
        }
        })
    },
    updateOrder(row, status){
      this.request.post("order/updatestatus", {orderSn: row.orderSn, status: status}).then(res =>{
        if(res.code === '200'){
          this.$message.success("发货成功")
          this.onLoad()
        } else {
          this.$message.error("发货失败")
        }
        
      })
    }
  }
}
</script>


<style>
.headerBg {
  background: #eee!important;
}
</style>
